import React, { useReducer, useRef, useEffect } from 'react';
import './App.css';
import { HashRouter as Router, Route, Redirect, Switch } from 'react-router-dom';
import Find from './components/Find/find.jsx';
import Square from './components/Square/square.jsx';
import Video from './components/video/video.jsx';
import Home from './components/Home/home.jsx';
import Songsheet from './components/SongSheetDetail/index.jsx';
import SongDansquare from './components/SongDansquare/index.jsx';
import Morenewdiscs from './components/Morenewdiscs/index.jsx';
import MyContext from './actions'

const initialState = { count: '' };

function reducer(state, action) {
  switch (action.type) {
    case 'increment':
      return { count: state.count + 1 };
    case 'decrement':
      return { count: state.count - 1 };
    default:
      return { count: action.mucurl }
  }
}


export default function App() {
  const inputEl = useRef(null);
  const [state, dispatch] = useReducer(reducer, initialState);

  // 播放音乐footer栏隐藏与显示逻辑
  useEffect(() => {
    if (state.count === '') {
      inputEl.current.style.display = 'none'
    } else {
      inputEl.current.style.display = 'block'
    }

    return () => {
      console.log('组件销毁')
    }
  })

  return <>
    <MyContext.Provider value={dispatch}>
      <Router>
        <div className="App find-view">
          <div className="content">
            <Switch>
              <Route path="/video" component={Video} />
              <Route path="/square" component={Square} />
              <Route path="/find" component={Find} />
              <Route path="/home" component={Home} />
              <Route path="/songSheetDetail" component={Songsheet} />
              <Route path="/songSheetSquare" component={SongDansquare} />
              <Route path="/morenewdiscs" component={Morenewdiscs} />
              <Redirect from="/" to="/find" />
            </Switch>
          </div>
          <div ref={inputEl}>
            <audio src={state.count} controls autoPlay ></audio>
          </div>
        </div>
      </Router>
    </MyContext.Provider>
  </>
}